<template>
	<div class="forget_pass_wrapper">
		<div class="header">
			<h2>密码重置</h2>
			<p>输入您的电子邮件以恢复您的密码</p>
		</div>
		<el-form ref="accform" :rules="formRules" :model="formData" label-width="90px">
			<el-form-item prop="account" label="电子邮件">
				<el-input
					auto-complete="new-password"
					prefix-icon="sw-icon-login-email"
					placeholder="请输入您的电子邮件"
					v-model="formData.account"
					@keyup.enter.native="handleSubmitAccount"
				></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSubmitAccount" :loading="btnLoading">确定</el-button>
			</el-form-item>
		</el-form>
		<el-divider></el-divider>
		<div class="bottom">
			<p>
				<span>记起密码？返回</span>
				<router-link :to="{ path: '/login' }">登录</router-link>
			</p>
		</div>
		<el-dialog title="重置用户密码" :visible.sync="resetDialog" width="480px" append-to-body>
			<el-form ref="resetform" :rules="resetRules" :model="resetForm" label-width="80px" class="reset_pass_form">
				<el-form-item prop="account" label="电子邮件">
					{{ resetForm.account }}
				</el-form-item>
				<el-form-item prop="accode" label="验证码">
					<el-input prefix-icon="sw-icon-verify-code" placeholder="请输入验证码" v-model="resetForm.accode"></el-input>
				</el-form-item>
				<el-form-item prop="password" label="登录密码">
					<el-input prefix-icon="sw-icon-login-pass" placeholder="输入您的登录密码" v-model="resetForm.password" show-password></el-input>
				</el-form-item>
				<el-form-item prop="confirmpass" label="确认密码">
					<el-input prefix-icon="sw-icon-login-pass" placeholder="输入您的确认密码" v-model="resetForm.confirmpass" show-password></el-input>
				</el-form-item>
			</el-form>
			<template slot="footer">
				<el-button size="medium" @click="resetDialog = false">取 消</el-button>
				<el-button size="medium" type="primary" @click="handleResetForm()">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import rsa from '@/utils/rsa';
import { mapGetters, mapActions } from 'vuex';
import { sendVerifyCode, resetUserPass } from '@/api/openApi';
export default {
	data() {
		const passRule = this.$getPassRules();
		const passValidator = (rule, value, callback) => {
			if (!this.resetForm.password) {
				callback(new Error('请输入登录密码'));
			} else if (this.resetForm.password !== value) {
				callback(new Error('登录密码和确认密码不一致'));
			} else {
				callback();
			}
		};
		return {
			loading: false,
			logoUrl: '',
			loginBackground: '',
			formData: { account: '' },
			formRules: {
				account: [
					{ required: true, message: '请输入电子邮件地址', trigger: 'blur' },
					{ type: 'email', message: '请输入正确的电子邮件地址', trigger: 'blur' }
				]
			},
			btnLoading: false,
			resetDialog: false,
			resetLoading: false,
			resetForm: {},
			resetRules: {
				accode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
				password: [
					{ required: true, message: '请输入登录密码', trigger: 'blur' },
					{ pattern: passRule.rules, message: passRule.message, trigger: 'blur' }
				],
				confirmpass: [
					{ required: true, message: '请输入确认密码', trigger: 'blur' },
					{ validator: passValidator, trigger: 'blur' }
				]
			}
		};
	},
	computed: {
		...mapGetters(['siteInfo'])
	},
	mounted() {
		this.initializeLoginPage();
	},
	methods: {
		...mapActions(['getFileUrl']),
		//初始化登录页面
		async initializeLoginPage() {
			this.loading = true;
			if (!!this.siteInfo.field8) {
				this.logoUrl = await this.getFileUrl(this.siteInfo.field8);
			}
			if (!!this.siteInfo.field1) {
				this.loginBackground = await this.getFileUrl(this.siteInfo.field1);
			}
			this.loading = false;
		},

		//提交重置
		handleSubmitAccount() {
			this.$refs['accform'].validate((vail) => {
				if (!vail) return false;
				this.btnLoading = true;
				this.sendVerifyCodeRequest();
			});
		},

		async sendVerifyCodeRequest() {
			let result = await sendVerifyCode(this.formData).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.$showCustomMessage('success', '密码重置验证码发送成功，请进入邮箱查看！');
				this.$nextTick(() => {
					this.$set(this.resetForm, 'account', this.formData.account);
					this.resetDialog = true;
				});
			}
		},

		handleResetForm() {
			this.$refs['resetform'].validate((vail) => {
				if (!vail) return false;
				this.resetLoading = true;
				this.resetPasswordRequest();
			});
		},

		formatResetParams() {
			let params = this.$deepClone(this.resetForm);
			delete params.confirmpass;
			params['password'] = rsa.rsaPublicData(params.password);
			return params;
		},

		async resetPasswordRequest() {
			let params = this.formatResetParams();
			let result = await resetUserPass(params).then((res) => res.data);
			this.resetLoading = false;
			if (result.code === '0') {
				this.$showCustomMessage('success', '密码重置成功！');
				this.$router.replace('/login');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.forget_pass_wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5%;
	min-width: 400px;
	overflow: hidden;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 0 100px rgba(0, 0, 0, 0.1);
	.header {
		line-height: 1;
		padding-bottom: 32px;
		h2 {
			font-size: 20px;
			margin-bottom: 16px;
			color: #303133;
		}
		p {
			font-size: 14px;
			color: #909399;
		}
	}
}
:deep(.reset_pass_form) {
	flex: 1;
	padding: 8px 8px 0;
	overflow: hidden;
	.el-input__prefix {
		left: 12px;
	}
	.el-input--prefix .el-input__inner {
		padding-left: 36px;
	}
}
</style>
